<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
    <style scoped="scope">
        .searchForm {
            text-align: center;
        }
    </style>

</head>
<body>
<div id="app">
    <h1>资源下载</h1>
    <div>
        <div class="searchForm">
            <el-form :inline="true" :model="r_search" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="r_search.fileName" placeholder="请输入文件名"></el-input>
                </el-form-item>
                <#--<el-form-item>-->
                    <#--<el-date-picker-->
                            <#--v-model="r_search.uploadDate"-->
                            <#--type="date"-->
                            <#--placeholder="请选择上传日期"-->
                            <#--format="yyyy 年 MM 月 dd 日">-->
                    <#--</el-date-picker>-->
                <#--</el-form-item>-->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                ref="multipleTable"
                :data="resourceData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
            >
            </el-table-column>
            <el-table-column width="40" label="序号" type="index" show-overflow-tooltip></el-table-column>
            <el-table-column prop="coursewareName" label="文件名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="coursewareSize" label="文件大小" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="coursewareAddtime" label="上传日期" :formatter="dateFormat" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="studyResource.techer.teacherRealname" label="上传人员" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="download(scope.row.coursewarePath)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            r_search: {
                fileName: '',
                uploadDate: ''
            },
            resourceData: [],
            pageIndex: 1,
            pageSize: 5,
            total: 10,
            multipleSelection: []
        },
        created: function () {
            this.getResources();
        },
        methods: {
            /*日期格式化*/
            dateFormat: function (row, column) {
                let val = row[column.property];
                //console.log(date);
                let date = new Date(val);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            },
            getResources: function () {
                $.ajax({
                    type:'post',
                    url:'/api/student/listResource',
                    data:{
                        pageIndex: this.pageIndex,
                        coursewareName: this.r_search.fileName,
                        coursewareAddtime: this.r_search.uploadDate
                    },
                    dataType:'json',
                    success:function (res) {
                        _this.pageSize = res.resData.pageSize;
                        _this.total = res.resData.total;
                        _this.resourceData = res.resData.list;
                    },
                    error : function(error) {
                        console.log('接口不通' + error);
                    }
                })
            },

            download: function (url) {
                console.log(url)
                location.href="/download?url="+url;
                // $.ajax({
                //     type:'post',
                //     url:'/download',
                //     data:{
                //        url:url
                //     },
                //     dataType:'json',
                //     success:function (res) {
                //     },
                //     error : function(error) {
                //         console.log('接口不通' + error);
                //     }
                // })
            },
            onSubmit: function () {
                this.getResources();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getResources();
            },
            toggleSelection(rows) {
                this.$refs.multipleTable.clearSelection();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    })
</script>
</body>
</html>
